<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button id="btn">test</button>
  <script>
    /* 
    同步回调
    异步回调
    */


    // 同步回调
    /* [1, 2, 3].forEach(item => {
      console.log(item)
    })
    console.log('forEach()之后')
    */
    
    // Promise: 用来封装异步任务的, 异步任务在执行器中执行
    /* const p = new Promise((resolve, reject) => {  // 执行器函数
      console.log('excutor')
      // 执行异步任务, 比如发异步ajax请求
      // 如果成功了, 将promise改变为成功的状态, 且指定成功的value
      // resolve(value)
      // 如果失败了, 将promise变为失败的状态, 且指定失败的reason
      // reject(reason)
    })
    console.log('new Promise()之后'); */


    // 异步回调
    /* setTimeout(() => { 
      console.log('执行timout回调')
    }, 0)
    console.log('setTimeout()之后')

    Promise.resolve(1).then(() => {// 异步回调
      console.log('promise成功的回调')
    })
    
    console.log('.then之后') */
  </script>

  <script>
   function fn1() {
     setTimeout(() => {
       console.log('timeout callback')
     }, 1000);
   }

   function fn2() {
     document.getElementById('btn').onclick = function () {
       console.log('dom event callback')
     }
   }

   function fn3() {
     $.get('../test.json', (data) => {
        console.log('ajax callback')
     })
   }

   function fn4() {
     console.log('同步任务')
     for (let index = 0; index < 100000; index++) {
       
     }
   }

   function fn5() {
     Promise.resolve(1).then(() => {
       console.log('Promise成功的回调')
     })
   }

   fn1()
   fn2()
   fn3()
   fn4()
   fn5()

    
  </script>
</body>
</html>